<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello GoDfs</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/static/fonts/icomoon/style.css">

    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/jquery-ui.css">
    <link rel="stylesheet" href="/static/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/css/jquery.fancybox.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="/static/fonts/flaticon/font/flaticon.css">
    <link rel="stylesheet" href="/static/css/aos.css">
    <link rel="stylesheet" href="/static/css/style.css">

    <script src="/static/js/jquery-3.3.1.min.js"></script>

    <!--    这里是上传文件的js逻辑-->
    <script type="text/javascript">

        function upload(host, token) {
            let url = "http://" + host + "/upload";
            let verF = $("#token");
            verF.val(token);
            var formData = new FormData($("#uploadFrom")[0]);
            $.ajax({
                type: "POST",
                data: formData,
                url: url,
                contentType: false,
                processData: false,
            }).success(function (data) {
                let res = $("#Response");
                res.text(data.key);
            })
        }

        //获取token上传文件
        function GetToken() {
            $.get("http://127.0.0.1/fileApi/getToken", function (data, status) {
                if (status === "success") {
                    let host = data.addr;
                    let token = data.token;
                    upload(host, token);
                }

            })//这里hosts是tracker服务器的地址
        }

        //直接函数
        $(document).ready(function () {
            let button = $("#upload");
            button.click(function () {
                GetToken()
            });
        })
    </script>

</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">

<div class="site-wrap">

    <div class="site-mobile-menu site-navbar-target">
        <div class="site-mobile-menu-header">
            <div class="site-mobile-menu-close mt-3">
                <span class="icon-close2 js-menu-toggle"></span>
            </div>
        </div>
        <div class="site-mobile-menu-body"></div>
    </div>
    <header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">

        <div class="container-fluid">
            <div class="d-flex align-items-center">
                <div class="site-logo mr-auto w-25"><a href="/">Hello GoDfs</a></div>

                <div class="mx-auto text-center">
                    <nav class="site-navigation position-relative text-right" role="navigation">
                        <ul class="site-menu main-menu js-clone-nav mx-auto d-none d-lg-block  m-0 p-0">
                            <li><a href="#home-section" class="nav-link">Home</a></li>
                            <li><a href="#contact-section" class="nav-link">Test</a></li>

                        </ul>
                    </nav>
                </div>

            </div>
        </div>

    </header>
    <div class="intro-section" id="home-section">

        <div class="slide-1"
             data-stellar-background-ratio="0.5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12">
                        <div class="row align-items-center">
                            <div class="col-lg-6 mb-4">
                                <h1 data-aos="fade-up" data-aos-delay="100">Welcome！</h1>
                                <p class="mb-4" data-aos="fade-up" data-aos-delay="200">
                                    欢迎使用goDfs，这是一个用来测试的界面，你可以再这里体验goDfs的高效文件传输，使用左侧的表单，或者Test
                                    界面来试一下吧。
                                </p>

                            </div>

                            <div class="col-lg-5 ml-auto" data-aos="fade-up" data-aos-delay="500">
                                <form action="/fileApi/get" method="get" class="form-box">
                                    <h3 class="h4 text-black mb-4">获取文件</h3>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="file token" name="key">
                                    </div>
                                    <div class="form-group">
                                        <input type="submit" class="btn btn-primary btn-pill" value="Read File">
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="site-section bg-light" id="contact-section">
        <div class="container">

            <div class="row justify-content-center">
                <div class="col-md-7">


                    <h2 class="section-title mb-3">上传文件测试</h2>
                    <p class="mb-5">者使用js来控制上传文件。</p>

                    <form method="post" enctype="multipart/form-data" id="uploadFrom">


                        <div class="form-group row">
                            <div class="col-md-12">
                                <input type="file" class="form-control" placeholder="File" name="file">
                                <input type="hidden" name="token" value="" id="token">
                            </div>
                        </div>


                    </form>

                    <div class="form-group row">
                        <div class="col-md-6">

                            <input id="upload" type="submit" class="btn btn-primary py-3 px-5 btn-block btn-pill"
                                   value="upLoad">
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12">
                                <textarea class="form-control" id="Response" cols="30" rows="10"
                                          placeholder="Response is Here"></textarea>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


</div> <!-- .site-wrap -->

<script src="/static/js/jquery-migrate-3.0.1.min.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/owl.carousel.min.js"></script>
<script src="/static/js/jquery.stellar.min.js"></script>
<script src="/static/js/jquery.countdown.min.js"></script>
<script src="/static/js/bootstrap-datepicker.min.js"></script>
<script src="/static/js/jquery.easing.1.3.js"></script>
<script src="/static/js/aos.js"></script>
<script src="/static/js/jquery.fancybox.min.js"></script>
<script src="/static/js/jquery.sticky.js"></script>
<script src="/static/js/main.js"></script>

</body>
</html>